<template>
  <div class="help">
    <header>
      <van-nav-bar
        title="帮助中心"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <div class="issue">
      <h4>问题分类</h4>
      <ul class="type">
        <li @click="services">
          <img src="../assets/img/mine/矢量智能对象@2x.png" alt="" />账号相关
        </li>
        <li @click="services">
          <img src="../assets/img/mine/矢量智能对象@2x.png" alt="" />预约咨询
        </li>
        <li @click="services">
          <img src="../assets/img/mine/矢量智能对象@2x.png" alt="" />投诉反馈
        </li>
        <li @click="services">
          <img src="../assets/img/mine/矢量智能对象@2x.png" alt="" />电话倾述
        </li>
        <li @click="services">
          <img src="../assets/img/mine/矢量智能对象@2x.png" alt="" />充值与提现
        </li>
        <li @click="services">
          <img
            src="../assets/img/mine/矢量智能对象@2x.png"
            alt=""
          />心理咨询介绍
        </li>
      </ul>
      <h4>常见问题</h4>
      <ul class="familiar">
        <li v-for="item in consultlist.two" :key="item" @click="services">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="service" @click="services">
      <button>投诉与反馈</button><button>在线客服</button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    const route = useRouter();
    const onClickLeft = () => route.push("/home/mine");
    const store = useStore();
    const consultdata = () => store.dispatch("consultdata");
    const consultlist = reactive(computed(() => store.state.Home.consultlist));
    onMounted(() => {
      consultdata();
    });
    const services = () => {
      route.push("./chat");
    };

    return {
      onClickLeft,
      consultdata,
      consultlist,
      services,
    };
  },
};
</script>

<style lang="less">
.help {
  .issue {
    width: 100%;
    h4 {
      font-size: 17px;
      line-height: 0;
      font-weight: 600;
      color: rgb(27, 27, 27);
      text-indent: 5px;
    }
    .type {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 45%;
        font-size: 13px;
        display: flex;
        align-items: center;
        line-height: 30px;
        padding-left: 10px;
        img {
          margin-right: 5px;
          width: 24px;
          height: 24px;
        }
      }
    }
    .familiar {
      width: 100%;
      li {
        padding-left: 10px;
        border-bottom: 1px solid rgb(211, 211, 211);
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
  .service {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    button {
      width: 50%;
      height: 40px;
      background: rgb(93, 185, 0);
      color: #fff;
      font-size: 16px;
      border: none;
      &:first-child {
        border-right: 1px solid rgb(216, 213, 213);
      }
    }
  }
}
</style>
